<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";

import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import upload from "@iconify-icons/ep/upload";

import AppUtil from "@/utils/AppUtil";

import AddFill from "@iconify-icons/ri/add-circle-line";
import { useRoute } from "vue-router";
import plus from "@iconify-icons/ep/element-plus";
//import log from "./comp/log.vue";
import { getToken } from "@/utils/auth";
import Form from "@/components/Form.vue";
const route = useRoute();
defineOptions({
  name: "goods"
});
const config = reactive({
  listUrl: "/api/v1/goods",
  addUrl: "/api/v1/goods",
  editUrl: "/api/v1/goods",
  deleteUrl: "/api/v1/goods/delete",
  detailUrl: "",
  title: "商品",

  /**搜索条件 */
  searchForm: [
    //商品名称 goodsName
    {
      label: "商品名称",
      prop: "goodsName",
      type: "input",
      input: {
        type: "text"
      }
    },
    //条形码 barCode
    {
      label: "条形码",
      prop: "barCode",
      type: "input",
      input: {
        type: "text"
      }
    },
    {
      label: "分类",
      prop: "categorySid",
      type: "cascader",
      cascader: {
        props: {
          checkStrictly: false,
          value: "sid",
          label: "categoryName",
          children: "children",
          lazy: true,
          multiple: false,
          emitPath: false,
          lazyLoad(node, resolve) {
            const { level } = node;
            console.log("node", node);
            if (level == 0) {
              //第一级，获取分类
              let arr = [];
              AppUtil.request(
                {
                  url: "/api/v1/categories/tree"
                },
                res => {
                  arr = res.data;
                  check_leaf(arr);
                  function check_leaf(arr1: any[]) {
                    arr1.map(val => {
                      if (val.children && val.children.length > 0) {
                        check_leaf(val.children);
                      } else {
                        val.leaf = true;
                      }
                    });
                  }
                  resolve(arr);
                }
              );
            }
          }
        }
      }
    },
    {
      label: "状态",
      prop: "publishState",
      type: "select",
      value: 1,
      select: {
        options: [
          { id: 1, name: "已发布" },
          { id: 2, name: "已上架" },
          { id: 3, name: "已下架" }
        ]
      }
    },
    {
      label: "是否推荐",
      prop: "suggest",
      type: "select",
      value: 0,
      select: {
        placeholder: "请选择是否推荐商品",
        options: [
          { id: 0, name: "是" },
          { id: 1, name: "否" }
        ]
      }
    }
  ],
  /**
   * 添加/编辑表单
   */
  editForm: [
    //名称     goodsName
    {
      label: "名称",
      prop: "goodsName",
      type: "input",
      input: {
        type: "text"
      },

      rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
    },
    //商品编号 goodsNo
    {
      label: "商品条形码",
      prop: "barCode",
      type: "input",
      input: {
        type: "text"
      },
      rules: [{ required: true, message: "请输入条形码", trigger: "blur" }]
    },
    {
      label: "分类",
      prop: "categorySid",
      type: "cascader",
      cascader: {
        props: {
          checkStrictly: false,
          value: "sid",
          label: "categoryName",
          children: "children",
          lazy: true,
          multiple: false,
          emitPath: false,
          lazyLoad(node, resolve) {
            const { level } = node;
            console.log("node", node);
            if (level == 0) {
              //第一级，获取分类
              let arr = [];
              AppUtil.request(
                {
                  url: "/api/v1/categories/tree"
                },
                res => {
                  arr = res.data;
                  check_leaf(arr);
                  function check_leaf(arr1: any[]) {
                    arr1.map(val => {
                      if (val.children && val.children.length > 0) {
                        check_leaf(val.children);
                      } else {
                        val.leaf = true;
                      }
                    });
                  }
                  resolve(arr);
                }
              );
            }
          }
        }
      }
    },

    // {
    //   label: "品牌",
    //   prop: "brandSid",
    //   type: "cascader",
    //   cascader: {
    //     placeholder: "请选择品牌",
    //     props: {
    //       checkStrictly: true,
    //       value: "sid",
    //       label: "brandName",
    //       children: "children",
    //       lazy: true,
    //       multiple: false,
    //       emitPath: false,
    //       lazyLoad(node, resolve) {
    //         const { level } = node;
    //         console.log("node", node);
    //         if (level == 0) {
    //           //第一级，获取分类
    //           let arr = [];
    //           AppUtil.request(
    //             {
    //               url: "/api/v1/brands/all"
    //             },
    //             res => {
    //               arr = res.data;
    //               check_leaf(arr);
    //               function check_leaf(arr1: any[]) {
    //                 arr1.map(val => {
    //                   if (val.children && val.children.length > 0) {
    //                     check_leaf(val.children);
    //                   } else {
    //                     val.leaf = true;
    //                   }
    //                 });
    //               }
    //               resolve(arr);
    //             }
    //           );
    //         }
    //       }
    //     }
    //   }
    // },
    //标签 labels
    {
      label: "标签",
      prop: "labels",
      type: "cascader",
      cascader: {
        placeholder: "请选择标签",
        props: {
          checkStrictly: false,
          value: "sid",
          label: "name",
          children: "children",
          lazy: true,
          multiple: true,
          /**true 返回父节点路径（数组），false 只包含本身 */
          emitPath: true,
          lazyLoad(node, resolve) {
            const { level } = node;
            console.log("node", node);
            if (level == 0) {
              //第一级，获取分类
              let arr = [];
              AppUtil.request(
                {
                  url: "/api/v1/labels/all"
                },
                res => {
                  arr = res.data;
                  check_leaf(arr);
                  function check_leaf(arr1: any[]) {
                    arr1.map(val => {
                      val.name = val.groupName;
                      if (val.children && val.children.length > 0) {
                        check_leaf(val.children);
                      }
                    });
                  }
                  resolve(arr);
                }
              );
            } else {
              AppUtil.request(
                {
                  url: "/api/v1/label-members",
                  params: {
                    groupSid: node.value,
                    size: 50
                  }
                },
                res => {
                  if (
                    res.data &&
                    res.data.records &&
                    res.data.records.length > 0
                  ) {
                    res.data.records.map(val => {
                      val.leaf = true;
                      val.name = val.memberName;
                    });
                  } else {
                    node.data.disabled = true;
                    instance.proxy.$message.error("此分类下没有标签");
                  }
                  resolve(res.data.records);
                }
              );
            }
          }
        }
      }
    },
    // 雾化物烟碱浓度 densityNicotine number
    {
      label: "烟碱浓度",
      prop: "densityNicotine",
      type: "input",
      input: {
        type: "number",
        placeholder: "雾化物烟碱浓度（mg/g）	"
      },
      span: 12
    },
    //雾化物烟碱总量（mg） totalNicotine
    {
      label: "烟碱总量",
      prop: "totalNicotine",
      type: "input",
      input: {
        type: "number",
        placeholder: "雾化物烟碱总量（mg）"
      },
      span: 12
    },
    //风味 flavour
    {
      label: "风味",
      prop: "flavour",
      type: "input",
      input: {
        type: "text"
      },
      span: 12
    },

    //商品描述 goodsDesc
    {
      label: "商品描述",
      prop: "goodsDesc",
      type: "input",
      input: {
        type: "textarea",
        rows: 3
      }
    },

    //单位 goodsUnit
    {
      label: "单位",
      prop: "goodsUnit",
      type: "input",
      input: {
        type: "text"
      },
      span: 12
    },
    //是否积分兑换 integralGoods
    {
      label: "可积分兑换",
      prop: "integralGoods",
      type: "select",
      value: 0,
      select: {
        placeholder: "请选择是否积分兑换",
        options: [
          { id: 0, name: "是" },
          { id: 1, name: "否" }
        ]
      },
      span: 12
    },

    //商品价格 goodsPrice
    {
      label: "商品价格",
      prop: "price",
      type: "input",
      input: {
        type: "number",
        placeholder: "商品价格"
      },
      span: 12
    },
    //兑换所需积分 redeemIntegral
    {
      label: "所需积分",
      prop: "redeemIntegral",
      type: "input",
      input: {
        type: "number",
        placeholder: "兑换所需积分"
      },
      span: 12
    },
    //是否推荐商品 suggest
    {
      label: "是否推荐",
      prop: "suggest",
      type: "select",
      value: 0,
      select: {
        placeholder: "请选择是否推荐商品",
        options: [
          { id: 0, name: "是" },
          { id: 1, name: "否" }
        ]
      },
      span: 12
    },
    //排序 sort
    {
      label: "排序",
      prop: "viewSort",
      type: "input",
      input: {
        type: "number"
      },
      value: 1,
      span: 12
    },
    //预警库存 warningStock
    {
      label: "预警库存",
      prop: "warningStock",
      type: "input",
      input: {
        type: "number"
      },
      span: 12,
      //rules 大于等于0
      rules: [
        {
          validator: (rule: any, value: any, callback: any) => {
            if (value < 0) {
              return callback(new Error("预警库存必须大于等于0"));
            }
            callback();
          }
        }
      ]
    },

    {
      label: "状态",
      prop: "publishState",
      type: "select",
      value: 1,
      select: {
        options: [
          { id: 1, name: "已发布" },
          { id: 2, name: "已上架" },
          { id: 3, name: "已下架" }
        ]
      },
      span: 12
    },
    {
      label: "商品主图",
      prop: "goodsImages",
      type: "uploads",
      upload: {
        fileArr: []
      }
    },
    // 详情图片 goodsDetails
    {
      label: "商品详情",
      prop: "goodsDetails",
      type: "editor"
      // type: "uploads",
      // upload: {
      //   fileArr: [],
      //   limit: 10,
      //   tip: "最多上传10张图片"
      // }
    }
  ],
  rules: {},
  formData: {} as any,
  defaultData: {},

  /**
   * 表格列
   */
  columns: [
    {
      label: "商品主图",
      prop: "goodsImages",
      slot: "img",
      width: 166
    },
    {
      label: "商品信息",
      prop: "barCode",
      slot: "info",
      minWidth: 200
    },
    {
      label: "积分兑换",
      prop: "integralGoods",
      slot: "integral"
    },
    {
      label: "商品状态",
      prop: "status",
      // cellRenderer: ({ row }) => {
      //   return row.status == 0 ? "启用" : "禁用";
      // }
      slot: "status"
    },

    {
      label: "操作",
      prop: "action",
      width: 150,
      slot: "operation"
    }
  ]
});

const pData = reactive({
  fileList: [],
  header: {},
  /**
   * 表格数据
   */
  dataArr: [],
  /**
   * 表格加载
   */
  loading: false,
  /**请求中 */
  reqing: false,
  /**
   * 表格分页
   */
  pagination: {
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  },

  imgArr: [],
  searchData: {},
  showEdit: false,

  id: "",
  // item: {},
  showStock: false,
  stock: {
    editForm: [
      // 门店 storeSid
      {
        label: "门店",
        prop: "storeSid",
        type: "select",
        select: {
          placeholder: "请选择门店",
          options: [],
          filterable: true,
          remote: true,
          loading: false,
          remoteMethod(query, val) {
            // console.log("remoteMethod", query, val);

            if (!val.options || !val.options.length) {
              val.select.loading = true;
              AppUtil.request(
                {
                  url: "/api/v1/stores",
                  method: "get"
                },
                (res: any) => {
                  res.data.records.map(item => {
                    item.value = item.sid;
                    item.name = item.storesName;
                  });
                  val.options = val.select.options = res.data.records;
                  // console.log("remoteMethod", res.data)
                },
                b => {
                  val.select.loading = false;
                }
              );
            } else if (query) {
              val.select.options = val.options.filter(val => {
                return val.name.includes(query);
              });
            } else {
              val.select.options = val.options;
            }
          }
        },
        rules: [
          {
            required: true,
            message: "请选择门店",
            trigger: "change"
          }
        ]
      },
      //库存 stock
      {
        label: "库存",
        prop: "stock",
        type: "input",
        input: {
          type: "number"
        },
        rules: [
          {
            validator: (rule: any, value: any, callback: any) => {
              if (value < 0) {
                return callback(new Error("库存必须大于等于0"));
              }
              callback();
            }
          }
        ]
      }
    ],
    formData: {} as any,
    defaultData: {}
  }

  //
});
/**上架：1-已发布，2-已上架，3-已下架 */
const pArr = [
  {},
  { label: "已发布", type: "primary" },
  { label: "已上架", type: "success" },
  { label: "已下架", type: "danger" }
];
const instance = getCurrentInstance();

function update_click(item) {
  console.log("update_click", item);
  config.formData = item;

  AppUtil.request(
    {
      url: "/api/v1/goods/" + item.sid,
      method: "get"
    },
    res => {
      // console.log("商品详情", res);

      res.data.price = res.data.price / 100;
      config.formData = res.data;
      config.formData.sid = item.sid;
      config.editForm.map(item1 => {
        //处理封面初始化imgArr

        if (item1.type == "uploadOne") {
          if (res.data[item1.prop]) {
            item1.upload.fileArr = [
              {
                url: AppUtil.getAliImgUrlByH(res.data[item1.prop].imgUrl),
                response: {
                  code: 200,
                  data: {
                    url: res.data[item1.prop].imgUrl
                  }
                }
              }
            ];
          } else {
            item1.upload.fileArr = [];
          }
        } else if (item1.type == "uploads") {
          let arr = [];
          let valArr = [];
          res.data[item1.prop].map(item2 => {
            arr.push({
              url: AppUtil.getAliImgUrlByH(
                item2.imgUrl || item2.goodsDesc || item2
              ),
              response: {
                code: 200,
                data: {
                  url: item2.imgUrl || item2.goodsDesc || item2
                }
              }
            });
            valArr.push(item2.imgUrl || item2.goodsDesc || item2);
          });
          item1.upload.fileArr = arr;
          config.formData[item1.prop] = valArr;
          // if (item1.prop=='goodsDetails') {
          //   item1.value
          // }
        } else if (item1.prop == "labels") {
          //初始化标签
          let arr = [];
          // let strArr = [];
          if (res.data.goodsLabels && res.data.goodsLabels.length > 0) {
            res.data.goodsLabels.map(val => {
              val.members.map(val1 => {
                arr.push([val.groupSid, val1.valueSid]);
                // strArr.push(val1.valueName);
              });
            });
          }
          config.formData[item1.prop] = arr;
          // if (strArr.length > 0) {
          //   item1.cascader.placeholder = strArr.join(",");
          // }
        }
      });
    }
  );

  pData.showEdit = true;
}
function add_click() {
  if (config.formData.sid) {
    //移除选中的编辑数据，保留上次新增数据
    config.formData = JSON.parse(JSON.stringify(config.defaultData));
  }

  config.editForm.map(item1 => {
    //处理封面初始化imgArr
    if (item1.type == "uploadOne" || item1.type == "uploads") {
      item1.upload.fileArr = [];
    }
  });
  // config.editForm=JSON.parse(JSON.stringify(config.editForm));
  pData.showEdit = true;
}

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
  pData.pagination.pageSize = val;
  reset_list();
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
  pData.pagination.currentPage = val;
  onSearch();
}
//请求轮播图数据
async function onSearch() {
  pData.loading = true;

  AppUtil.request(
    {
      url: config.listUrl,
      method: "get",
      params: {
        ...pData.searchData,
        current: pData.pagination.currentPage,
        size: pData.pagination.pageSize
      }
    },
    res => {
      console.log("onSearch", res);

      res.data.records.map(item => {
        item.price = (item.price / 100).toFixed(2);
      });
      pData.dataArr = res.data.records;
      pData.pagination.total = res.data.total * 1;
      pData.pagination.currentPage = res.data.current * 1;
    },
    b => (pData.loading = false)
  );
}
onSearch();

function handleDelete(item) {
  AppUtil.request(
    {
      url: config.deleteUrl,
      method: "PUT",
      data: {
        sidList: [item.sid]
      }
    },
    res => {
      onSearch();
    }
  );
}

function search_click() {
  reset_list();
}
/**搜索第一页的数据 */
function reset_list() {
  pData.pagination.currentPage = 1;
  onSearch();
}
function submitForm() {
  submit_form();
  // if (pData.imgArr.length < 1) {
  //   return instance.proxy.$alert("请选择图片");
  // }
  // let img = pData.imgArr[0];
  // //图片已经上传过
  // if (img.response && img.response.code == 200) {
  //   return submit_form();
  // }
  // //上传图片
  // upload1.value!.submit();
}
/**
 * 提交表单
 */
function submit_form() {
  instance.proxy.$refs["vForm"].validate(valid => {
    if (!valid) return;
    pData.reqing = true;

    // return console.log("formData", config.formData);
    //config.formData 移除sid
    let formData: any = JSON.parse(JSON.stringify(config.formData));
    if (config.formData.goodsImages && config.formData.goodsImages.length > 0) {
      let arr = [];
      for (let i = 0; i < config.formData.goodsImages.length; i++) {
        arr.push({
          defaultImg: i,
          imgUrl: config.formData.goodsImages[i]
        });
      }
      formData.goodsImages = arr;
    }
    //标签
    let labels = [];
    if (config.formData.labels && config.formData.labels.length > 0) {
      config.formData.labels.map(val => {
        labels.push({
          groupSid: val[0],
          valueSid: [val[1]]
        });
      });
    }
    // formData.label = lArr;

    AppUtil.request(
      {
        url: config.formData.sid
          ? config.editUrl + "/" + config.formData.sid
          : config.addUrl,

        method: config.formData.sid ? "put" : "post",
        // url: config.addUrl,
        // method: "post",
        // data: formData
        data: {
          barCode: formData.barCode,
          brandSid: formData.brandSid,
          categorySid: formData.categorySid,
          densityNicotine: formData.densityNicotine,
          flavour: formData.flavour,
          // goodsCount: formData.goodsCount,
          goodsDesc: formData.goodsDesc,
          goodsDetails: formData.goodsDetails,
          goodsImages: formData.goodsImages,
          goodsName: formData.goodsName,
          goodsUnit: formData.goodsUnit,
          integralGoods: formData.integralGoods,
          labels: labels,
          redeemIntegral: formData.redeemIntegral,
          totalNicotine: formData.totalNicotine,
          suggest: formData.suggest,

          viewSort: formData.viewSort,
          price: formData.price * 100,
          publishState: formData.publishState,
          warningStock: formData.warningStock
        }
      },
      res => {
        // console.log("banner", res);
        instance.proxy.$message.success(
          config.formData.sid ? "修改成功" : "添加成功"
        );
        onSearch();
        pData.showEdit = false;
      },
      b => {
        pData.reqing = false;
      }
    );
  });
}
function stock_click(row) {
  pData.showStock = true;
  pData.stock.formData.goodsSid = row.sid;
}
function submitStockForm() {
  instance.proxy.$refs["sForm"].validate(valid => {
    if (!valid) return;
    pData.reqing = true;

    AppUtil.request(
      {
        url: "/api/v1/goods/stock",

        method: "put",

        data: pData.stock.formData
      },
      res => {
        // console.log("banner", res);
        instance.proxy.$message.success("录入成功");

        pData.showStock = false;
      },
      b => {
        pData.reqing = false;
      }
    );
  });
}
let obj = getToken();
// let token = "";
if (obj) {
  // token = obj.accessToken;
  pData.header = { Authorization: obj.accessToken };
}
function upload_ok(e) {
  console.log(`current page`, e);
  pData.fileList = [];
}
function export_click() {
  pData.reqing = true;
  AppUtil.request(
    {
      url: "api/v1/goods/export",
      method: "get",
      params: {
        ...pData.searchData,
        current: 1,
        size: 1000
      }
    },
    res => {
      instance.proxy.$message.success(res.data || "导出成功");
    },
    b => (pData.reqing = false)
  );
}
</script>

<template>
  <div class="main">
    <el-form
      v-if="config.searchForm && config.searchForm.length > 0"
      :model="pData.searchData"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
      style="padding-bottom: 5px"
      :inline="true"
    >
      <el-form-item
        v-for="(item, i) in config.searchForm"
        :key="i"
        :label="item.label"
        :prop="item.prop"
      >
        <el-select
          v-if="item.type === 'select'"
          v-model="pData.searchData[item.prop]"
          style="width: 200px"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(option, j) in item.select.options"
            :key="j"
            :label="option.label || option.name"
            :value="option.value || option.id"
          />
        </el-select>
        <el-input
          v-else-if="item.type === 'input'"
          v-model="pData.searchData[item.prop]"
          :placeholder="item.input.placeholder"
          clearable
        />
        <el-date-picker
          v-else-if="item.type === 'datetimerange'"
          v-model="pData.searchData[item.prop]"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 360px"
        />
        <el-cascader
          v-else-if="item.type === 'cascader'"
          v-model="pData.searchData[item.prop]"
          style="width: 100%"
          :props="item.cascader.props"
          :options="item.cascader.options"
          clearable
          :placeholder="item.cascader.placeholder"
          :show-all-levels="item.cascader.showAllLevels || false"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="pData.loading"
          @click="search_click"
        >
          搜索
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      :title="config.title + '管理'"
      :columns="config.columns"
      @refresh="onSearch"
    >
      <template #buttons>
        <el-upload
          ref="upload1"
          v-model:file-list="pData.fileList"
          :limit="1"
          accept=".xlsx, .xls"
          list-type="text"
          action="/api/v1/goods/import"
          :on-success="upload_ok"
          :headers="pData.header"
          style="height: 2rem"
        >
          <el-button type="primary" :icon="useRenderIcon(upload)">
            导入商品
          </el-button>
        </el-upload>
        <el-button
          style="margin-left: 1rem"
          type="danger"
          :loading="pData.reqing"
          :icon="useRenderIcon(plus)"
          @click="export_click"
        >
          导出商品
        </el-button>
        <el-button
          v-if="config.addUrl"
          style="margin-left: 1rem"
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="add_click"
        >
          新增{{ config.title }}
        </el-button>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          :data="pData.dataArr"
          :columns="dynamicColumns"
          :loading="pData.loading"
          :size="size"
          :pagination="pData.pagination"
          :paginationSmall="size === 'small' ? true : false"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #img="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              fit="cover"
              :src="AppUtil.getAliImgUrlByW(row.goodsImg, 200)"
            />
          </template>
          <template #info="{ row }">
            <div style="font-weight: bold">{{ row.goodsName }}</div>
            <div>分类：{{ row.categoryName }}</div>
            <!-- <div>品牌：{{ row.brandName }}</div> -->
            <div>价格：{{ row.price }}/{{ row.goodsUnit }}</div>
            <div>预警库存：{{ row.warningStock }}</div>
            <div>烟碱总量：{{ row.totalNicotine }}</div>
            <div>烟碱浓度：{{ row.densityNicotine }}</div>
          </template>
          <template #integral="{ row }">
            <div>是否积分兑换：{{ row.integralGoods == 1 ? "否" : "是" }}</div>
            <div>所需积分：{{ row.redeemIntegral }}</div>
          </template>
          <template #status="{ row }">
            <div>
              状态：<el-tag :type="pArr[row.publishState].type" size="small">
                {{ pArr[row.publishState].label }}
              </el-tag>
            </div>
            <div style="margin-top: 5px">
              是否推荐：<el-tag
                :type="row.suggest == 0 ? 'success' : 'danger'"
                size="small"
              >
                {{ row.suggest == 0 ? "是" : "否" }}
              </el-tag>
            </div>
          </template>
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="stock_click(row)"
            >
              录入库存
            </el-button>
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              @click="update_click(row)"
            >
              修改
            </el-button>

            <el-popconfirm
              :title="`是否确认删除这条数据`"
              @confirm="handleDelete(row)"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <el-dialog
      v-model="pData.showEdit"
      align-center
      :title="`${config.formData.sid ? '修改' : '新增'}${config.title}`"
      :width="700"
      draggable
    >
      <div style="max-height: 82vh; overflow-y: auto; padding-right: 1.5rem">
        <Form ref="vForm" v-model="config" />
      </div>

      <template #footer>
        <div class="cls-center">
          <el-button @click="pData.showEdit = false">取消</el-button>
          <el-button
            type="primary"
            :loading="pData.reqing"
            @click="submitForm()"
          >
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="pData.showStock"
      align-center
      title="录入库存"
      width="600px"
      draggable
    >
      <div style="max-height: 82vh; overflow-y: auto; padding-right: 1.5rem">
        <Form ref="sForm" v-model="pData.stock" />
      </div>
      <template #footer>
        <div class="cls-center">
          <el-button
            type="primary"
            :loading="pData.reqing"
            @click="submitStockForm()"
          >
            确定
          </el-button>
          <el-button @click="pData.showStock = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
